<template>
  <div class="user-appointments">
    <div class="page-header">
      <h2 class="page-title">服务预约</h2>
      <el-button type="primary" @click="handleNewAppointment">
        <el-icon><Plus /></el-icon>
        新增预约
      </el-button>
    </div>
    
    <!-- 快捷预约 -->
    <div class="quick-appointment">
      <h3>快捷预约</h3>
      <div class="service-grid">
        <el-card 
          v-for="service in quickServices" 
          :key="service.type"
          class="service-card"
          @click="handleQuickAppointment(service)"
        >
          <div class="service-content">
            <div class="service-icon" :style="{ backgroundColor: service.color }">
              <el-icon>
                <component :is="service.icon" />
              </el-icon>
            </div>
            <div class="service-info">
              <h4>{{ service.name }}</h4>
              <p>{{ service.description }}</p>
              <span class="service-price">{{ service.price }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    
    <!-- 我的预约 -->
    <div class="my-appointments">
      <div class="appointments-header">
        <h3>我的预约</h3>
        <el-form :model="searchForm" inline>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="全部状态" clearable style="width: 150px">
              <el-option label="待确认" value="pending" />
              <el-option label="已确认" value="confirmed" />
              <el-option label="进行中" value="in_progress" />
              <el-option label="已完成" value="completed" />
              <el-option label="已取消" value="cancelled" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <el-card class="appointments-list" v-loading="loading">
        <div v-if="!loading && appointments.length === 0" class="no-data">
          <el-empty description="暂无预约记录" />
        </div>
        <div v-else>
          <div 
            v-for="appointment in appointments" 
            :key="appointment.id"
            class="appointment-item"
          >
            <div class="appointment-main">
              <div class="appointment-service">
                <el-tag :type="getServiceTypeColor(appointment.serviceType)" size="large">
                  {{ getServiceTypeLabel(appointment.serviceType) }}
                </el-tag>
              </div>
              <div class="appointment-details">
                <div class="appointment-time">
                  <el-icon><Calendar /></el-icon>
                  <span>{{ appointment.appointmentDate }} {{ appointment.appointmentTime }}</span>
                </div>
                <div class="appointment-duration">
                  <el-icon><Timer /></el-icon>
                  <span>预计时长：{{ appointment.duration }}</span>
                </div>
                <div class="appointment-staff">
                  <el-icon><User /></el-icon>
                  <span>服务人员：{{ appointment.staffName }}</span>
                </div>
                <div class="appointment-address">
                  <el-icon><LocationInformation /></el-icon>
                  <span>服务地址：{{ appointment.address }}</span>
                </div>
              </div>
            </div>
            <div class="appointment-actions">
              <div class="appointment-status">
                <el-tag :type="getStatusType(appointment.status)">
                  {{ getStatusLabel(appointment.status) }}
                </el-tag>
              </div>
              <div class="appointment-buttons">
                <el-button size="small" @click="handleView(appointment)">查看详情</el-button>
                <el-button 
                  v-if="appointment.status === 'pending' || appointment.status === 'confirmed'"
                  size="small" 
                  type="primary" 
                  @click="handleEdit(appointment)"
                >
                  修改
                </el-button>
                <el-button 
                  v-if="appointment.status === 'pending' || appointment.status === 'confirmed'"
                  size="small" 
                  type="danger" 
                  @click="handleCancel(appointment)"
                >
                  取消
                </el-button>
                <el-button 
                  v-if="appointment.status === 'completed'"
                  size="small" 
                  type="success" 
                  @click="handleRate(appointment)"
                >
                  评价
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 新增/编辑预约对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      @close="resetForm"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="服务类型" prop="serviceType">
          <el-select v-model="formData.serviceType" placeholder="请选择服务类型">
            <el-option label="体检" value="physical_exam" />
            <el-option label="护理" value="nursing" />
            <el-option label="送餐" value="meal_delivery" />
            <el-option label="清洁" value="cleaning" />
            <el-option label="陪伴" value="companionship" />
          </el-select>
        </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预约日期" prop="appointmentDate">
              <el-date-picker
                v-model="formData.appointmentDate"
                type="date"
                placeholder="选择预约日期"
                style="width: 100%"
                :disabled-date="disabledDate"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预约时间" prop="appointmentTime">
              <el-time-picker
                v-model="formData.appointmentTime"
                placeholder="选择预约时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="预计时长" prop="duration">
          <el-input v-model="formData.duration" placeholder="如：2小时" />
        </el-form-item>
        
        <el-form-item label="服务地址" prop="address">
          <el-input v-model="formData.address" type="textarea" rows="2" />
        </el-form-item>
        
        <el-form-item label="特殊需求">
          <el-input v-model="formData.notes" type="textarea" rows="3" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
    
    <!-- 查看详情对话框 -->
    <el-dialog v-model="viewDialogVisible" title="预约详情" width="500px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="服务类型">
          <el-tag :type="getServiceTypeColor(viewData.serviceType)">
            {{ getServiceTypeLabel(viewData.serviceType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预约日期">{{ viewData.appointmentDate }}</el-descriptions-item>
        <el-descriptions-item label="预约时间">{{ viewData.appointmentTime }}</el-descriptions-item>
        <el-descriptions-item label="预计时长">{{ viewData.duration }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(viewData.status)">
            {{ getStatusLabel(viewData.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="服务人员">{{ viewData.staffName }}</el-descriptions-item>
        <el-descriptions-item label="服务地址">{{ viewData.address }}</el-descriptions-item>
        <el-descriptions-item label="特殊需求">{{ viewData.notes || '无' }}</el-descriptions-item>
        <el-descriptions-item label="预约时间">{{ viewData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="服务费用" v-if="viewData.fee">
          ¥{{ viewData.fee }}
        </el-descriptions-item>
        <el-descriptions-item label="评价" v-if="viewData.rating">
          <el-rate :model-value="viewData.rating" disabled show-score />
        </el-descriptions-item>
        <el-descriptions-item label="评价内容" v-if="viewData.reviewContent">
          {{ viewData.reviewContent }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    
    <!-- 评价对话框 -->
    <el-dialog v-model="rateDialogVisible" title="服务评价" width="500px">
      <el-form label-width="80px">
        <el-form-item label="评价等级">
          <el-rate 
            v-model="ratingData.rating" 
            show-text 
            :texts="['极差', '差', '一般', '好', '极好']"
          />
        </el-form-item>
        <el-form-item label="评价内容">
          <el-input
            v-model="ratingData.reviewContent"
            type="textarea"
            :rows="4"
            placeholder="请分享您对本次服务的评价..."
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="rateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitRating">提交评价</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Plus,
  Calendar, 
  Timer, 
  User, 
  LocationInformation,
  Monitor,
  TakeawayBox,
  Brush,
  ChatDotRound
} from '@element-plus/icons-vue'

// API 基础URL
const API_BASE_URL = 'http://localhost:8080/api'

// 获取当前用户ID（从localStorage或路由参数获取）
const getCurrentUserId = () => {
  try {
    // 从localStorage获取用户信息
    const userInfoStr = localStorage.getItem('userInfo')
    if (userInfoStr) {
      const userInfo = JSON.parse(userInfoStr)
      return userInfo.id
    }
    
    // 如果没有找到用户信息，返回null或提示用户重新登录
    console.warn('未找到用户信息，请重新登录')
    return null
  } catch (error) {
    console.error('获取用户ID失败:', error)
    return null
  }
}

// 根据用户ID获取老人ID
const getElderlyIdByUserId = async (userId: number) => {
  try {
    const response = await fetch(`${API_BASE_URL}/elderly/user/${userId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
    if (response.ok) {
      const result = await response.json()
      if (result.code === 200) {
        return result.data.id
      }
    }
    throw new Error('未找到对应的老人信息')
  } catch (error) {
    console.error('获取老人ID失败:', error)
    throw error
  }
}

const searchForm = reactive({
  status: ''
})

const dialogVisible = ref(false)
const viewDialogVisible = ref(false)
const rateDialogVisible = ref(false)
const dialogTitle = ref('')
const isEdit = ref(false)
const loading = ref(false)

const formRef = ref()
const formData = reactive({
  id: null,
  serviceType: '',
  appointmentDate: '',
  appointmentTime: '',
  duration: '',
  address: '',
  notes: ''
})

const ratingData = reactive({
  appointmentId: null,
  rating: 0,
  reviewContent: ''
})

const viewData = ref<any>({})
const appointments = ref<any[]>([])

// 快捷服务
const quickServices = ref([
  {
    type: 'physical_exam',
    name: '健康体检',
    description: '全面身体检查，健康状况评估',
    price: '￥200/次',
    color: '#67C23A',
    icon: 'Monitor'
  },
  {
    type: 'nursing',
    name: '专业护理',
    description: '血压测量，用药指导，健康咨询',
    price: '￥80/小时',
    color: '#409EFF',
    icon: 'User'
  },
  {
    type: 'meal_delivery',
    name: '营养送餐',
    description: '营养配餐，准时送达',
    price: '￥30/餐',
    color: '#E6A23C',
    icon: 'TakeawayBox'
  },
  {
    type: 'cleaning',
    name: '家政清洁',
    description: '房间清洁，整理收纳',
    price: '￥60/小时',
    color: '#909399',
    icon: 'Brush'
  },
  {
    type: 'companionship',
    name: '陪伴聊天',
    description: '心理疏导，陪伴交流',
    price: '￥50/小时',
    color: '#F56C6C',
    icon: 'ChatDotRound'
  }
])

// 表单验证规则
const formRules = {
  serviceType: [
    { required: true, message: '请选择服务类型', trigger: 'change' }
  ],
  appointmentDate: [
    { required: true, message: '请选择预约日期', trigger: 'change' }
  ],
  appointmentTime: [
    { required: true, message: '请选择预约时间', trigger: 'change' }
  ],
  duration: [
    { required: true, message: '请输入预计时长', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入服务地址', trigger: 'blur' }
  ]
}

// 格式化时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 格式化日期
const formatDate = (dateTime: string) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleDateString('zh-CN')
}

// 格式化时间
const formatTime = (dateTime: string) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 计算时长
const calculateDuration = (startTime: string, endTime: string) => {
  if (!startTime || !endTime) return '未设置'
  
  const start = new Date(startTime)
  const end = new Date(endTime)
  const diffMs = end.getTime() - start.getTime()
  const diffHours = Math.round(diffMs / (1000 * 60 * 60) * 10) / 10
  
  if (diffHours < 1) {
    const diffMinutes = Math.round(diffMs / (1000 * 60))
    return `${diffMinutes}分钟`
  }
  
  return `${diffHours}小时`
}

// 获取员工姓名
const getStaffName = async (staffId: number) => {
  if (!staffId) return '未分配'
  
  try {
    const response = await fetch(`${API_BASE_URL}/staff/${staffId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
    if (response.ok) {
      const result = await response.json()
      if (result.code === 200) {
        return result.data.name
      }
    }
    return `员工${staffId}`
  } catch (error) {
    return `员工${staffId}`
  }
}

// 获取服务类型标签
const getServiceTypeLabel = (type: string) => {
  const typeMap: { [key: string]: string } = {
    physical_exam: '体检',
    nursing: '护理',
    meal_delivery: '送餐',
    cleaning: '清洁',
    companionship: '陪伴'
  }
  return typeMap[type] || type
}

// 获取服务类型颜色
const getServiceTypeColor = (type: string) => {
  const colorMap: { [key: string]: string } = {
    physical_exam: 'success',
    nursing: 'primary',
    meal_delivery: 'warning',
    cleaning: 'info',
    companionship: 'danger'
  }
  return colorMap[type] || 'default'
}

// 获取状态标签
const getStatusLabel = (status: string) => {
  const statusMap: { [key: string]: string } = {
    PENDING: '待确认',
    pending: '待确认',
    CONFIRMED: '已确认',
    confirmed: '已确认',
    IN_PROGRESS: '进行中',
    in_progress: '进行中',
    COMPLETED: '已完成',
    completed: '已完成',
    CANCELLED: '已取消',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: { [key: string]: string } = {
    PENDING: 'warning',
    pending: 'warning',
    CONFIRMED: 'primary',
    confirmed: 'primary',
    IN_PROGRESS: 'success',
    in_progress: 'success',
    COMPLETED: 'success',
    completed: 'success',
    CANCELLED: 'danger',
    cancelled: 'danger'
  }
  return typeMap[status] || 'info'
}

// 禁用过去日期
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7
}

// 加载预约数据
const loadAppointments = async () => {
  loading.value = true
  try {
    const userId = getCurrentUserId()
    if (!userId) {
      ElMessage.error('请先登录')
      appointments.value = []
      return
    }
    
    // 获取老人ID
    const elderlyId = await getElderlyIdByUserId(userId)
    
    const params = new URLSearchParams()
    params.append('page', '0')
    params.append('size', '50')
    params.append('elderlyId', elderlyId.toString())
    
    if (searchForm.status) {
      params.append('status', searchForm.status.toUpperCase())
    }
    
    const response = await fetch(`${API_BASE_URL}/appointments?${params.toString()}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
    if (!response.ok) {
      throw new Error('获取预约列表失败')
    }
    
    const result = await response.json()
    if (result.code === 200) {
      // 处理数据，添加员工姓名
      const appointmentsWithNames = await Promise.all(result.data.content.map(async (appointment: any) => {
        const staffName = appointment.staffId ? await getStaffName(appointment.staffId) : '未分配'
        
        return {
          id: appointment.id,
          serviceType: appointment.serviceType,
          appointmentDate: formatDate(appointment.appointmentTime),
          appointmentTime: formatTime(appointment.appointmentTime),
          duration: calculateDuration(appointment.appointmentTime, appointment.endTime),
          status: appointment.status,
          staffName,
          address: appointment.serviceAddress || '',
          notes: appointment.notes || '',
          createTime: formatDateTime(appointment.createTime),
          // 保留原始数据
          appointmentTimeRaw: appointment.appointmentTime,
          endTime: appointment.endTime,
          fee: appointment.fee,
          rating: appointment.rating,
          reviewContent: appointment.reviewContent
        }
      }))
      
      appointments.value = appointmentsWithNames
    } else {
      ElMessage.error(result.message || '获取预约列表失败')
    }
  } catch (error) {
    console.error('加载预约列表失败:', error)
    ElMessage.error('加载预约列表失败')
  } finally {
    loading.value = false
  }
}

// 快捷预约
const handleQuickAppointment = (service: any) => {
  dialogTitle.value = '新增预约'
  isEdit.value = false
  resetForm()
  formData.serviceType = service.type
  dialogVisible.value = true
}

// 新增预约
const handleNewAppointment = () => {
  dialogTitle.value = '新增预约'
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
}

// 编辑预约
const handleEdit = (row: any) => {
  dialogTitle.value = '修改预约'
  isEdit.value = true
  
  // 处理日期时间数据
  const appointmentDateTime = new Date(row.appointmentTimeRaw)
  
  Object.assign(formData, {
    id: row.id,
    serviceType: row.serviceType,
    appointmentDate: appointmentDateTime,
    appointmentTime: appointmentDateTime,
    duration: row.duration,
    address: row.address,
    notes: row.notes
  })
  dialogVisible.value = true
}

// 查看详情
const handleView = (row: any) => {
  viewData.value = row
  viewDialogVisible.value = true
}

// 取消预约
const handleCancel = async (row: any) => {
  try {
    const { value: reason } = await ElMessageBox.prompt('请输入取消原因', '取消预约', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /\S/,
      inputErrorMessage: '取消原因不能为空'
    })
    
    const response = await fetch(`${API_BASE_URL}/appointments/${row.id}/cancel?reason=${encodeURIComponent(reason)}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
    if (!response.ok) {
      throw new Error('取消预约失败')
    }
    
    const result = await response.json()
    if (result.code === 200) {
      ElMessage.success('预约已取消')
      await loadAppointments()
    } else {
      ElMessage.error(result.message || '取消预约失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('取消预约失败:', error)
      ElMessage.error('取消预约失败')
    }
  }
}

// 评价
const handleRate = (row: any) => {
  ratingData.appointmentId = row.id
  ratingData.rating = row.rating || 0
  ratingData.reviewContent = row.reviewContent || ''
  rateDialogVisible.value = true
}

// 提交评价
const handleSubmitRating = async () => {
  if (ratingData.rating === 0) {
    ElMessage.warning('请选择评价等级')
    return
  }
  
  try {
    const response = await fetch(`${API_BASE_URL}/appointments/${ratingData.appointmentId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        rating: ratingData.rating,
        reviewContent: ratingData.reviewContent
      })
    })
    
    if (!response.ok) {
      throw new Error('提交评价失败')
    }
    
    const result = await response.json()
    if (result.code === 200) {
      ElMessage.success('评价提交成功')
      rateDialogVisible.value = false
      await loadAppointments()
    } else {
      ElMessage.error(result.message || '提交评价失败')
    }
  } catch (error) {
    console.error('提交评价失败:', error)
    ElMessage.error('提交评价失败')
  }
}

// 搜索
const handleSearch = async () => {
  await loadAppointments()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    const valid = await formRef.value.validate()
    if (!valid) return
    
    const userId = getCurrentUserId()
    if (!userId) {
      ElMessage.error('请先登录')
      return
    }
    
    // 获取老人ID
    const elderlyId = await getElderlyIdByUserId(userId)
    
    // 准备提交数据
    const appointmentDateTime = new Date(formData.appointmentDate)
    const timeDate = new Date(formData.appointmentTime)
    
    // 合并日期和时间
    appointmentDateTime.setHours(timeDate.getHours())
    appointmentDateTime.setMinutes(timeDate.getMinutes())
    
    // 计算结束时间（根据时长）
    const endDateTime = new Date(appointmentDateTime)
    const durationMatch = formData.duration.match(/(\d+\.?\d*)/);
    const durationHours = durationMatch ? parseFloat(durationMatch[1]) : 1;
    endDateTime.setHours(endDateTime.getHours() + durationHours)
    
    const submitData = {
      elderlyId: elderlyId,
      serviceType: formData.serviceType,
      appointmentTime: appointmentDateTime.toISOString(),
      endTime: endDateTime.toISOString(),
      serviceAddress: formData.address,
      notes: formData.notes || '',
      status: 'PENDING'
    }
    
    let response
    if (isEdit.value) {
      // 更新
      response = await fetch(`${API_BASE_URL}/appointments/${formData.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(submitData)
      })
    } else {
      // 创建
      response = await fetch(`${API_BASE_URL}/appointments`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(submitData)
      })
    }
    
    if (!response.ok) {
      throw new Error(isEdit.value ? '修改失败' : '提交失败')
    }
    
    const result = await response.json()
    if (result.code === 200) {
      ElMessage.success(isEdit.value ? '预约修改成功' : '预约提交成功，等待确认')
      dialogVisible.value = false
      await loadAppointments()
    } else {
      ElMessage.error(result.message || (isEdit.value ? '修改失败' : '提交失败'))
    }
  } catch (error: any) {
    console.error('提交预约失败:', error)
    ElMessage.error(isEdit.value ? '修改预约失败' : '提交预约失败')
  }
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  Object.assign(formData, {
    id: null,
    serviceType: '',
    appointmentDate: '',
    appointmentTime: '',
    duration: '',
    address: '',
    notes: ''
  })
}

onMounted(async () => {
  // 调试：验证用户和老人关联
  const userId = getCurrentUserId()
  if (userId) {
    console.log('当前用户ID:', userId)
    try {
      const elderlyId = await getElderlyIdByUserId(userId)
      console.log('关联的老人ID:', elderlyId)
    } catch (error) {
      console.error('获取老人ID失败:', error)
      ElMessage.warning('未找到您的个人信息，请联系管理员进行关联')
    }
  }
  
  loadAppointments()
})
</script>

<style scoped>
.user-appointments {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

.quick-appointment {
  margin-bottom: 30px;
}

.quick-appointment h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.service-card {
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.service-content {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.service-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 20px;
  color: white;
}

.service-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #333;
}

.service-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
}

.service-price {
  font-size: 14px;
  color: #409EFF;
  font-weight: 500;
}

.my-appointments {
  margin-bottom: 30px;
}

.appointments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.appointments-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.appointments-list {
  max-height: 800px;
  overflow-y: auto;
}

.no-data {
  padding: 40px 0;
}

.appointment-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.appointment-item:last-child {
  border-bottom: none;
}

.appointment-main {
  display: flex;
  align-items: flex-start;
  flex: 1;
  gap: 16px;
}

.appointment-service {
  margin-top: 4px;
}

.appointment-details {
  flex: 1;
}

.appointment-details > div {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.appointment-details .el-icon {
  margin-right: 8px;
  color: #909399;
}

.appointment-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.appointment-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .appointments-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .service-grid {
    grid-template-columns: 1fr;
  }
  
  .appointment-item {
    flex-direction: column;
    gap: 16px;
  }
  
  .appointment-actions {
    align-items: flex-start;
    width: 100%;
  }
  
  .appointment-buttons {
    width: 100%;
    justify-content: flex-start;
  }
}
</style> 